<template>
    <div class="outdiv">
        <cli-title class="titleClass" :pageIndex="pageIndex"></cli-title>
        <cli-menu class = "meunClass" :acIndex="acIndex" :cameraId="cameraId"></cli-menu>
        <div style="margin-top: 50px;">
            <camera-title></camera-title>

        </div>
        <div class="left">
        <el-card class = "class-tp">
            <temperature></temperature>
        </el-card>
        <el-card class = "class-tp">
            <wind></wind>
        </el-card>
        <el-card class = class-rain>
            <rain></rain>
        </el-card>
        </div>
        <div class = 'right'>

            <el-card>
                <h2 style="margin-left: 300px">最新异物</h2>
                <foreign_list ref="foreignList"></foreign_list>
            </el-card>
        </div>
    </div>
</template>

<script>
    import cliTitle from '~/components/base/cliTitle.vue'
    import CliMenu from "../../../components/base/cliMenu";
    import Temperature from "../../../components/camera/weather/temperature";
    import Wind from "../../../components/camera/weather/wind";
    import Rain from "../../../components/camera/weather/rain";
    import Foreign_list from "../../../components/foreign/foreign_list";
    import API_PRO from "../../../api/API_PRO"
    import API from "../../../api/POST";

    import CameraTitle from "../../../components/base/cameraTitle";





    export default {
        name: "name",
        components: {CameraTitle, Foreign_list, Rain, Wind, Temperature, CliMenu, cliTitle},
        data(){
            return{
                pageIndex:'2',
                acIndex:'1',
                cameraId:'',
                camera:[],
            }
        },
        mounted() {
            let data={
                cameraid : this.cameraId
            }
            API.cameraDetail(data).then(res=>{
                if (res.length>0){
                    console.log("???")
                    let result = [];
                    res.forEach(item=>{
                        console.log(item)
                        let cell = {};
                        let timeList = item.time.split("T");
                        cell = item
                        cell.date = timeList[0];
                        cell.time = timeList[1];
                        result.push(cell)
                    })
                    this.$refs.foreignList.setData(result)
                }
                else {
                    console.log('不会吧？')
                    this.$refs.foreignList.setData(res)
                }


            })
        },
        created() {
            this.cameraId = this.$route.params.cameraId;




        }
    }
</script>

<style scoped>
    .outdiv{
        min-width: 1000px;
        overflow: hidden;
    }
    .titleClass{
        position: fixed;
        z-index: 1;
    }

    .meunClass{
        margin-top: 50px;
        float: left;
    }
    .class-tp{
        float: left;
        margin-top: 20px;
        margin-left: 30px;
        width: 100%;
        height: 250px;
    }
    .class-rain{
        float: left;
        margin-top: 20px;
        margin-left: 30px;
        margin-bottom: 50px;
        width: 100%;
        height: 450px;
    }
    .left{
        float: left;
        width: 32%;
    }
    .right{
        float: left;
        margin-top: 20px;
        width: 50%;
        margin-left: 50px;
    }

</style>
